<template>
  <div class="flex h-full w-1/6 flex-col rounded-bl-lg">
    <!--导航栏盒子-->
    <div class="flex w-full h-1/6 rounded-tl-lg justify-center items-center border-r-2 border-gray-400  flex-col d-flex">
      <div><div class=" border-stone-400 h-12 text-center text-3xl" >{{ username }}</div></div>
      <div @click="NoLogin"><button class=" bg-orange-100/20 rounded-xl w-20 hover:bg-orange-300/20 mt-2">退出登录</button></div>
    </div>
    <!--用户头像盒子-->
    <div class="flex  border-r-2 border-gray-400 h-4/5 flex-col rounded-bl-lg">
      <div class=" border-stone-400 h-12 text-center text-3xl border-b" ></div>
      <div  @click="pushMySave" class=" pl-6 border-b-2 border-stone-400 mb-1 flex items-center mt-4 mb-2  hover:bg-gray-400/50 hover:cursor-pointer active:bg-stone-700/50" :class="{' bg-stone-500/60':activeItem=='MySave'}">
        <svg t="1732963368042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="4148" width="32" height="32">
          <path
            d="M512 0C229.7 0 0 229.7 0 512s229.7 512 512 512 512-229.7 512-512S794.3 0 512 0z m0 979.5C254.2 979.5 44.5 769.8 44.5 512S254.2 44.5 512 44.5 979.5 254.2 979.5 512 769.8 979.5 512 979.5z"
            fill="" p-id="4149"></path>
          <path
            d="M878.7 426.7c-3.7-11.4-13.4-19.5-25.2-21.2L636.8 374l-96.9-196.3c-5.2-10.7-16-17.4-27.9-17.4-11.9 0-22.6 6.7-27.9 17.4L387.2 374l-216.7 31.5c-11.9 1.7-21.5 9.8-25.2 21.2-3.7 11.3-0.7 23.6 7.9 31.9L310 611.4l-37 215.8c-2 11.8 2.7 23.5 12.4 30.5 5.5 4 11.9 6 18.3 6 4.9 0 9.9-1.2 14.5-3.6L512 758.2l193.8 102c10.5 5.5 23.1 4.6 32.8-2.4s14.4-18.7 12.4-30.5l-37-215.8 156.8-152.9c8.6-8.3 11.6-20.5 7.9-31.9z m-204.1 161c-5.2 5.1-7.6 12.5-6.4 19.7l34.4 200.7-180.2-94.7c-3.3-1.7-6.8-2.6-10.4-2.6s-7.1 0.9-10.4 2.7l-180.2 94.7 34.4-200.7c1.2-7.2-1.2-14.6-6.4-19.7L203.6 445.7l201.5-29.3c7.3-1.1 13.6-5.6 16.8-12.2L512 221.6l90.1 182.5c3.3 6.6 9.5 11.1 16.8 12.2l201.5 29.3-145.8 142.1z"
            fill="" p-id="4150"></path>
        </svg>
        我的收藏
      </div>
      <div :class="{' bg-stone-500/60':activeItem=='Recommend'}" class="pl-6 border-b-2 border-stone-400 mb-1 flex items-center  hover:bg-slate-600/50 hover:cursor-pointer" @click="pushRecommend" >
        <svg  t="1732962925844" class="icon stroke-cyan-500" viewBox="0 0 1106 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="3014" width="32" height="32">
          <path
            d="M479.733045 252.246493c16.896332 0 31.478756 12.596502 35.462599 30.63079l2.403905 10.38959a273.924177 273.924177 0 0 1 4.022841 46.606158c0 38.307486-3.649856 67.83032-11.162559 90.252434l-19.649224 58.656682 61.862556 0.25999c59.705641 0.25199 150.511053 0.679973 159.261707 0.846967 15.642382 0.666974 21.805138 6.007763 27.132928 14.950409 5.439785 9.157638 6.367748 18.306277 6.08676 24.737023-4.05684 25.169006-54.147861 251.030081-62.554529 285.048737-3.099878 5.369788-7.281712 9.892609-12.164519 13.14748-8.419667 5.57478-8.972645 5.57478-12.799494 5.57478l-362.388682 0.020999 0.50298-328.74701c87.596539-27.396918 151.325021-108.453715 153.846922-202.452001l0.066997-2.457903-0.134995-1.627936 0.020999-0.959962 0.062998-3.842848c0.009-19.766219 9.434627-41.034379 30.11881-41.034379m-300.448129 262.610624v318.683408h-60.087626V514.857117h60.087626m300.448129-307.327857c-44.893226 0-74.827043 38.911463-74.827043 85.746612 0 2.638896-0.209992 5.163796 0 7.689696-2.349907 87.58054-71.518174 157.986758-153.808923 167.643376l-0.629975 409.472821h8.033682c-0.012-0.012999 0.083997-0.020999 0.372985-0.020999 0.302988 0 0.394984 0.008 0.381985 0.020999l398.386259-0.020999h0.251991c15.038406 0 23.52907-3.939844 37.224529-13.004486 13.054484-8.703656 22.929094-20.609186 29.363839-34.065654 1.78293-2.701893 63.627486-280.560915 65.209424-297.051263 1.237951-17.584305-2.579898-35.773587-12.177519-51.931948-15.135402-25.403996-37.120533-35.668591-63.719482-36.793546-1.379945-0.213992-160.931641-0.884965-160.931642-0.884965 10.562583-31.540754 13.477467-69.131269 13.477468-104.455873a318.725407 318.725407 0 0 0-7.08472-66.690365l-0.394985 0.041998c-8.317671-37.631513-40.555398-65.695404-79.126873-65.695404zM192.557392 470.143884h-86.636577c-17.374314 0-31.439758 14.514427-31.439758 32.405719v343.303436c0 17.886293 14.065444 32.40472 31.439758 32.40472h86.636577c17.375313 0 31.440758-14.514427 31.440757-32.40472V502.553603c0-17.895293-14.061444-32.408719-31.440757-32.408719z m66.707364 407.937881h-0.75497c0.008 0.012999 0.074997 0.024999 0.158994 0.041999-0.062998 0.024999-0.058998 0.033999 0 0.033998a2.852887 2.852887 0 0 0 0.213991-0.012999 3.355867 3.355867 0 0 0 0.225991 0.012999c0.067997 0 0.075997-0.012999 0-0.033998a0.653974 0.653974 0 0 0 0.155994-0.041999z m647.044434-761.03993a13.17148 13.17148 0 0 0-9.425627-8.733654L805.644168 86.197054 756.420113 6.260213a13.179479 13.179479 0 0 0-22.434114 0l-49.222055 79.936841-91.238395 22.115126a13.17148 13.17148 0 0 0-6.933726 21.339157l60.812597 71.518174-7.164717 93.604302a13.189479 13.189479 0 0 0 18.155283 13.189479l86.80857-35.741588 86.80857 35.740588a13.197479 13.197479 0 0 0 12.756496-1.52694 13.16348 13.16348 0 0 0 5.389787-11.661539l-7.159717-93.604302 60.812597-71.517174a13.17148 13.17148 0 0 0 2.495901-12.610502z"
            fill="#515151" p-id="3015"></path>
        </svg>
        推荐歌曲
      </div>
      <div :class="{' bg-stone-500/60':activeItem=='game'}" @click="pushGame" class="pl-6 border-b-2 border-stone-400 mb-1 flex items-center  hover:bg-slate-600/50 hover:cursor-pointer">
        <svg t="1733312003614" class="icon"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4451" width="32" height="32"><path d="M812.221666 596.623329c39.231513 0 71.148433-31.917944 71.148433-71.151503 0-39.23049-31.91692-71.14741-71.148433-71.14741-39.23356 0-71.151503 31.91692-71.151503 71.14741C741.069139 564.705386 772.988106 596.623329 812.221666 596.623329zM812.221666 491.163439c18.917862 0 34.30941 15.391549 34.30941 34.308387 0 18.919908-15.391549 34.31248-34.30941 34.31248-18.919908 0-34.31248-15.392572-34.31248-34.31248C777.908162 506.553964 793.300734 491.163439 812.221666 491.163439z" fill="#d4237a" p-id="4452"></path><path d="M664.837944 467.568045c39.231513 0 71.14741-31.917944 71.14741-71.151503 0-39.23049-31.915897-71.14741-71.14741-71.14741s-71.14741 31.91692-71.14741 71.14741C593.690534 435.649078 625.606431 467.568045 664.837944 467.568045zM664.837944 362.107131c18.917862 0 34.308387 15.391549 34.308387 34.308387 0 18.919908-15.390525 34.31248-34.308387 34.31248s-34.308387-15.392572-34.308387-34.31248C630.529557 377.49868 645.920082 362.107131 664.837944 362.107131z" fill="#d4237a" p-id="4453"></path><path d="M981.344504 494.64575l0-95.1685c0-38.181601-6.478552-71.91796-19.254529-100.272751-11.484565-25.486464-28.085662-46.812165-49.343825-63.382563-44.128033-34.399461-96.464005-39.535435-123.733069-39.535435L530.602683 196.286502l0-47.291073c0-10.172687-8.246825-18.419512-18.419512-18.419512s-18.419512 8.246825-18.419512 18.419512l0 47.291073L220.949204 196.286502c-27.269064 0-79.605036 5.136997-123.733069 39.535435-21.25714 16.570397-37.859259 37.896098-49.342802 63.382563-12.777001 28.354791-19.254529 62.09115-19.254529 100.272751l0 95.158267-0.01535 27.733645 0 151.796218c0 65.411779 53.218062 118.628818 118.631888 118.628818l47.955198 0c3.240811 0.156566 17.126053 0.596588 33.735335-2.153036 26.479071-4.379751 46.794769-14.349823 60.382229-29.635971 14.512529-16.32685 22.955828-28.534893 24.713868-31.140231 14.757099-19.72525 36.772508-31.719422 65.444525-35.655058 5.853311-0.803295 11.965519-1.336438 18.674315-1.626034l70.296019 0 0.316202 0.002047 0.37453-0.01535c0.423649-0.008186 42.156122-1.160429 61.145615 22.577205 6.353708 7.942903 17.944697 9.234315 25.889647 2.877537 7.943926-6.354731 9.231245-17.945721 2.877537-25.889647-29.641087-37.052894-84.874039-36.561707-90.896196-36.390815l-70.39528 0-0.76748 0.016373c-8.03193 0.334621-15.400758 0.974188-22.526039 1.952468-39.023782 5.354961-69.39858 22.364357-90.282213 50.554396l-0.567935 0.811482c-0.075725 0.113587-7.688099 11.539824-21.830191 27.450189-16.142655 18.159592-52.369741 20.199041-64.925708 19.462261l-0.587378-0.037862-49.0266 0c-45.101197 0-81.792864-36.68962-81.792864-81.789795L65.442478 522.379395l0.01535-27.733645 0-95.1685c0-61.172221 18.305925-106.458637 54.407144-134.601604 35.43914-27.626197 78.543867-31.751145 101.084233-31.751145l568.062853 0c22.540366 0 65.645093 4.124947 101.084233 31.751145 36.102243 28.142967 54.408167 73.429383 54.408167 134.601604l0 95.178733 0.01535 27.713178 0 151.796218c0 45.099151-36.691667 81.789795-81.792864 81.789795l-48.439222 0-1.174756 0.037862c-11.68718 0.750083-48.713468-1.222851-64.924685-19.462261-14.143115-15.910365-21.75549-27.336602-21.816888-27.429723l-0.581238-0.831948c-20.883633-28.190039-51.259454-45.199435-90.278119-50.553373-5.613858-0.772596-19.290345-1.197268-36.586267-1.673106-4.142343-0.113587-7.53358-0.205685-9.326413-0.280386-10.161431-0.423649-18.74697 7.472182-19.170618 17.635659s7.472182 18.74697 17.635659 19.170618c1.973958 0.081864 5.449106 0.178055 9.849322 0.298805 8.532327 0.234337 28.514427 0.784876 32.586163 1.343601 28.6669 3.934612 50.682309 15.928784 65.440431 35.653011 1.75804 2.604314 10.200316 14.813381 24.714891 31.142278 13.586436 15.284101 33.902134 25.255197 60.381206 29.634948 11.480472 1.899256 21.658276 2.275833 27.919886 2.275833 2.797719 0 4.814656-0.074701 5.815449-0.122797l47.956222 0c65.413825 0 118.631888-53.217039 118.631888-118.628818L981.359854 522.358929 981.344504 494.64575z" fill="#d4237a" p-id="4454"></path><path d="M268.360004 585.593112c0.013303 0 0.025583 0 0.039909 0 10.153244 0 18.396999-8.221242 18.418488-18.380626l0.220011-105.304348 105.065917-0.23843c10.172687-0.022513 18.400069-8.28878 18.377556-18.461467-0.022513-10.159384-8.264221-18.377556-18.418488-18.377556-0.014326 0-0.028653 0-0.042979 0l-104.905258 0.23843 0.220011-105.146758c0.021489-10.172687-8.207939-18.436908-18.380626-18.458397-0.013303 0-0.025583 0-0.039909 0-10.154267 0-18.396999 8.222265-18.418488 18.380626l-0.220011 105.307418-105.065917 0.23843c-10.172687 0.022513-18.400069 8.28878-18.377556 18.461467 0.022513 10.159384 8.264221 18.377556 18.418488 18.377556 0.013303 0 0.028653 0 0.042979 0l104.905258-0.23843-0.220011 105.142665C249.957889 577.307402 258.187317 585.572646 268.360004 585.593112z" fill="#d4237a" p-id="4455"></path></svg>
        玩玩小游戏
      </div>
      <div @click="pushMusicList" :class="{' bg-stone-500/60':activeItem=='MusicList'}" class="pl-6 border-b-2 border-stone-400 mb-1 flex items-center hover:bg-slate-600/50 hover:cursor-pointer">
        <svg t="1733312089425"  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6949" width="32" height="32"><path d="M928.681944 632.73956h-277.782369c-28.957862 0-52.437096-23.483429-52.437096-52.437096 0-28.957862 23.479234-52.437096 52.437096-52.437096h277.782369c28.957862 0 52.437096 23.479234 52.437096 52.437096s-23.479234 52.437096-52.437096 52.437096zM928.681944 795.789563h-277.782369c-28.957862 0-52.437096-23.483429-52.437096-52.437096 0-28.957862 23.479234-52.437096 52.437096-52.437096h277.782369c28.957862 0 52.437096 23.479234 52.437096 52.437096s-23.479234 52.437096-52.437096 52.437096zM807.745221 957.086071h-156.845646c-28.957862 0-52.437096-23.479234-52.437096-52.437096 0-28.953667 23.479234-52.437096 52.437096-52.437096H807.745221c28.953667 0 52.437096 23.483429 52.437096 52.437096 0 28.957862-23.483429 52.437096-52.437096 52.437096z" p-id="6950" fill="#515151"></path><path d="M358.88368 539.296655a274.501905 274.501905 0 0 0-78.538185-11.427092c-139.428141 0-252.864262 103.284299-252.864262 230.236606s113.436121 230.236606 252.864262 230.236606c139.432336 0 252.868457-103.284299 252.868457-230.236606a213.062408 213.062408 0 0 0-1.237516-22.719945c0.788654-3.616062 1.229126-7.366363 1.229126-11.221539V254.185676l173.289919-94.533596v38.203571l-108.028807 56.929906v118.553981l184.914175-97.457489a52.428706 52.428706 0 0 0 27.988824-46.387952V71.314451a52.437096 52.437096 0 0 0-77.543977-46.035576L455.657389 177.027636a52.428706 52.428706 0 0 0-27.326019 46.03138v152.034019a58.268101 58.268101 0 0 0 0 2.097484v346.974166l0.004195 0.0839v33.857584c0 69.124677-66.389558 125.362414-147.99007 125.362414-81.600511 0-147.99007-56.237737-147.99007-125.362414s66.389558-125.362414 147.99007-125.362414" p-id="6951" fill="#515151"></path></svg>
        发现音乐
      </div>
      <div @click="back" class="ml-9 mb-1 mt-60 "><svg t="1732963412638" class="icon stroke-cyan-500  hover:cursor-pointer" viewBox="0 0 1024 1024"
          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5188" width="64" height="64">
          <path
            d="M622.650611 284.901749 447.745069 284.901749 447.745069 142.823869 63.980685 334.705038l383.76336 191.882192L447.744046 384.834762l189.391465 0c149.914358 0 224.855164 62.789045 224.855164 188.368158 0 129.928165-77.435627 194.876386-232.338602 194.876386L187.952184 768.079306l0 99.93199L634.146433 868.011296c211.184817 0 316.777737-95.104031 316.777737-285.311071C950.924169 384.178823 841.510224 284.901749 622.650611 284.901749z"
            fill="#000000" p-id="5189"></path>
        </svg></div>

    </div>
    <!--导航栏其他内容区域盒子-->
  </div>
  <!--导航栏盒子结束-->
</template>
<script>
import axios from 'axios';

  export default {
    name: 'LeftNav',
    data(){
      return{
        username:'',
        activeItem:""
      }
    },

    methods:{
        NoLogin(){
          localStorage.setItem('IsLogin',false)
          localStorage.clear()
          location.reload();
          console.log(localStorage.clear());

        },
        pushRecommend(){
            this.$router.push('/Recommend');
            this.activeItem="Recommend"
        },
        pushMySave(){
          this.$router.push('/MySave');
          this.activeItem = 'MySave';
        
    },
    pushGame(){
      this.$router.push('/game')
      this.activeItem="game"

    },
    pushMusicList(){
          this.$router.push('/MusicList')
        this.activeItem="MusicList"
    },
    back(){
      this.$router.back()
    }
  },
  mounted()
  {

    this.username=localStorage.getItem('username')
    console.log(this.$router);

  },
 
  }
</script>